<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="300" height="300"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");

      var gradient = context.createLinearGradient(0, 0, 300, 300);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(1, "green");
  
      context.fillStyle = gradient;
      context.fillRect(0, 0, 300, 300);
    </script>
</body>

</html>
